<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>角色</title>
    <meta name="keywords" content="保理软件,保理产品"/>
    <meta name="description" content="设置描述..."/>
    <meta name="author" content="DeathGhost"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <!--产品logo-->
    <link rel="icon" href="${pageContext.request.contextPath}/images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css"/>

    <%--设置服务器路径--%>
    <script>var http = "${pageContext.request.contextPath}";</script>

    <!--jQuery v3.2.1-->
    <script src="${pageContext.request.contextPath}/javascript/jquery.js"></script>
    <!--滚动插件-->
    <script src="${pageContext.request.contextPath}/javascript/plug-ins/customScrollbar.min.js"></script>
    <!--统计插件-->
    <script src="${pageContext.request.contextPath}/javascript/plug-ins/echarts.min.js"></script>
    <!--弹框插件-->
    <script src="${pageContext.request.contextPath}/javascript/plug-ins/layerUi/layer.js"></script>
    <!--HTML编辑器插件-->
    <script src="${pageContext.request.contextPath}/editor/ueditor.config.js"></script>
    <!--HTML编辑器插件-->
    <script src="${pageContext.request.contextPath}/editor/ueditor.all.js"></script>
    <!--分页插件-->
    <script src="${pageContext.request.contextPath}/javascript/plug-ins/pagination.js"></script>
    <!--整个模板样式控制文件-->
    <script src="${pageContext.request.contextPath}/javascript/public.js"></script>
    <style>

        .form-group-col-2 .form-label {
            padding: 3px 0px !important;
            font-size: 12px !important;
            width: 115px;
            font-weight: bolder;
        }

        .form-group-col-2 .form-cont {
            margin-left: 125px;
            min-height: 33px;
            width: 300px;
        }

        .form-control {
            font-size: 12px !important;
            padding: 4px 15px !important;
        }

        #file {
            position: absolute;
            top: 0;
            right: 80px;
            z-index: 999;
            opacity: 0;
            width: 100px;
            height: 25px;
        }


    </style>
</head>
<body>

<!--软件主体内容-->
<main class="content mCustomScrollbar">
    <!--开始::内容-->
    <div class="page-wrap">
        <!--面包屑-->
        <section class="page-hd page-hd-top">
            <div class="breadcrumb">
                <ul>
                    <li><a href="#">权限管理</a><i class="icon-angle-right"></i></li>
                    <li>角色管理</li>
                </ul>
            </div>
        </section>
        <div class="clear mb-10">
            <button class="btn btn-secondary radius fr ml-15"
                    style="padding: 4px 15px!important;font-size: 12px!important;" onclick="addOrUpdateRole(0)">新增
            </button>
            <div class="fr input-group">
                <label class="mr-5 size-s">
                    角色名称：
                    <input type="text" class="form-control" placeholder="搜索..." style="width:290px;" id="condition">
                </label>
                <button class="btn btn-secondary radius" style="padding: 4px 15px!important;font-size: 12px!important;"
                        onclick="Query()">查询
                </button>
            </div>
        </div>
        <div id="context_div">

        </div>
    </div>
    <!--开始::结束-->
</main>

<div id="newRole" style="display: none;">
    <div class="page-wrap">
        <div class="form-group-col-2">
            <div class="form-label">角色名称：</div>
            <div class="form-cont">
                <input type="hidden" id="roleid">
                <input type="text" placeholder="角色名称" id="rolename" class="form-control form-boxed"
                       style="width: 360px">
            </div>
        </div>
        <div class="form-group-col-2">
            <div class="form-label">角色备注：</div>
            <div class="form-cont">
                <input type="text" placeholder="角色备注" id="description" class="form-control form-boxed"
                       style="width: 360px">
            </div>
        </div>
        <div style="clear: both;width: 25%;margin: 10px auto 15px;">
            <button class="btn btn-primary-outline btn-block" onclick="saveRole()">保存</button>
        </div>
    </div>
</div>

<div id="showRole" style="display: none;">
    <div class="page-wrap">
        <div class="form-group-col-2">
            <div class="form-label">角色名称：</div>
            <div class="form-cont">
                <span id="showName"></span>
            </div>
        </div>
        <div class="form-group-col-2">
            <div class="form-label">角色备注：</div>
            <div class="form-cont">
                <span id="showDescription" style="width: 360px"></span>
            </div>
        </div>
        <div class="form-group-col-2">
            <div class="form-label">创建时间：</div>
            <div class="form-cont">
                <span id="showCreateTime" style="width: 360px"></span>
            </div>
        </div>
        <div class="form-group-col-2">
            <div class="form-label">修改时间：</div>
            <div class="form-cont">
                <span id="showUpdateTime" style="width: 360px"></span>
            </div>
        </div>
    </div>
</div>

<%--分配权限--%>
<div id="assignPowers" style="display: none;">

</div>

<script>

    var layerwindows = null;

    //打开新增或者修改页面
    function addOrUpdateRole(id) {
        initdata(id);
        var text = id == 0 ? '新增' : '修改';
        layerwindows = layer.open({
            type: 1,
            skin: 'layui-layer-demo',
            title: text + "角色",
            closeBtn: 2,
            area: ['600px', '250px'],
            shade: [0.1, '#fff'],
            shadeClose: true, //开启遮罩关闭
            scrollbar: false,//屏蔽浏览器出现滚动条
            content: $('#newRole')
        });
    }
    //显示权限信息
    function showRole(id) {
        layerwindows = layer.open({
            type: 1,
            skin: 'layui-layer-demo',
            title: "显示角色",
            closeBtn: 2,
            area: ['600px', '250px'],
            shade: [0.1, '#fff'],
            shadeClose: true, //开启遮罩关闭
            scrollbar: false,//屏蔽浏览器出现滚动条
            content: $('#showRole')
        });

        $.get("${pageContext.request.contextPath}/rolecontroller/roles_getRole", {"sysid": id}, function (data) {
            if (data.code == 1) {
                $("#showName").text(data.data.name);
                $("#showDescription").text(data.data.description);
                $("#showCreateTime").text(data.data.createtime);
                $("#showUpdateTime").text(data.data.updatetime);
            } else {
                layer.msg("*" + data.message);
            }
        });
    }
    //初始化数据
    function initdata(id) {
        var roleid = $("#roleid");
        var rolename = $("#rolename");
        var description = $("#description");
        if (id == 0) {
            roleid.val(0);
            rolename.val("");
            description.val("");
        } else {
            $.get("${pageContext.request.contextPath}/rolecontroller/roles_getRole", {"sysid": id}, function (data) {
                if (data.code == 1) {
                    roleid.val(id);
                    rolename.val(data.data.name);
                    description.val(data.data.description);
                } else {
                    layer.msg("*" + data.message);
                }
            });
        }

    }
    //保存
    function saveRole() {
        var roleid = $("#roleid").val();
        var rolename = $("#rolename").val();
        var description = $("#description").val();
        $.post("${pageContext.request.contextPath}/rolecontroller/roles_saveRole", {
            "sysid": roleid,
            "rolename": rolename,
            "description": description
        }, function (data) {
            layer.msg("*" + data.message);
            if (data.code == 1) {
                layer.close(layerwindows);
                go_page(1);

            }
        });
    }
    //删除
    function deleteRole(id) {
        parent.layer.confirm('您确定删除该角色吗？', {
            btn: ['确定', '取消']
        }, function () {
            $.get("${pageContext.request.contextPath}/rolecontroller/roles_deleteRole", {"sysid": id}, function (data) {
                layer.msg("*" + data.message);
                if (data.code == 1) {
                    parent.layer.closeAll();
                    go_page(1);
                }
            });
        });

    }
    //查询
    function Query() {
        go_page(1);
    }
    //分页数据
    function go_page(page) {

        //获取条件
        var condition = $("#condition").val();
        $.post("${pageContext.request.contextPath}/rolecontroller/roles_list", {
            "page": page,
            "condition": condition
        }, function (data) {
            $("#context_div").html(data)
        });
    }
    //页面加载完成
    $(function () {
        go_page(1);
    });

    //分配权限
    function assignPowers(id) {
        $.get("${pageContext.request.contextPath}/rolecontroller/roles_getPowers", {"sysid": id}, function (data) {
            $("#assignPowers").html(data)
        });
        layerwindows = layer.open({
            type: 1,
            skin: 'layui-layer-demo',
            title: "显示角色",
            closeBtn: 2,
            area: ['800px', '400px'],
            shade: [0.1, '#fff'],
            shadeClose: true, //开启遮罩关闭
            scrollbar: false,//屏蔽浏览器出现滚动条
            content: $('#assignPowers')
        });
    }

    function savePowers() {
        var checks = $("input[type=checkbox]");
        var roleid = $("#role_check_id").val();
        var powerss = "";
        checks.each(function (i, obj) {
            var flag = $(obj).prop('checked');
            var val = $(obj).val();
            if(flag){
                if (powerss == "") {
                    powerss=val;
                } else {
                    powerss+=","+val;
                }
            }
        });
        $.post("${pageContext.request.contextPath}/rolecontroller/roles_savePowers", {"sysid": roleid,"powerss":powerss}, function (data) {
            layer.msg("*" + data.message);
            if (data.code == 1) {
                layer.close(layerwindows);
                go_page(1);
            }
        });
    }

</script>
</body>
</html>
